<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
				float: left;
				margin-right: 50px;
				margin-bottom: 50px;
			}
			p{
				font-size: 16px; /* 页面默认文字尺寸 */
				line-height: 20px; /* 浮动文字，行高无法设定 */
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/1.png" alt="哪吒" width="250px" height="250px" />
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consectetur saepe sequi. Maiores vitae rem, officiis, minima voluptatum maxime consequuntur deleniti fugit adipisci veritatis, sed aliquam reiciendis?
		 Aliquid, quas repellendus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium earum odit asperiores itaque iusto consectetur
		  nostrum voluptas perspiciatis? Totam consectetur, provident ex ducimus 
		  mollitia earum! Quia maxime doloremque praesentium placeat.
		  loremlorem ipsum, dolor sit amet consectetur adipisicing elit.
		   Omnis dignissimos facere quidem aut eos ad qui quaerat excepturi in voluptatibus
			molestias unde quos impedit ducimus, velit laboriosam tempore dolor provident!</p>
		
	</body>
</html>